<template>
	<div class="app-container">
		<div>
			<div class="bgWhite radius8">
				<el-form class="p20 flex col-top row-between" :model="queryParams" ref="queryForm" :inline="true">
					<div>
						<el-form-item label="流程编码" prop="processId" style="margin-bottom: 0;">
							<el-input v-model="queryParams.processId" placeholder="请输入流程编码" clearable class="resetInput"
								style="width: 200px" :suffix-icon="Search" @keyup.enter="handleQuery" />
						</el-form-item>
						<el-form-item label="业务编码" prop="keyword" style="margin-bottom: 0;">
							<el-input v-model="queryParams.keyword" placeholder="请输入业务编码" clearable class="resetInput"
								style="width: 200px" :suffix-icon="Search" @keyup.enter="handleQuery" />
						</el-form-item>
						<el-form-item label="流程类型" prop="processName"  style="margin-bottom: 0;" v-if="name == ''">
							<el-select v-model="queryParams.processName" placeholder="请选择流程类型" size="large"
								style="width: 240px">
								<el-option v-for="dict in mainProcess" :key="dict.value" :label="dict.label"
									:value="dict.value" />
							</el-select>
						</el-form-item>
					</div>
					<el-form-item style=" margin-right: 0;margin-bottom: 0;">
						<div class="flex col-center row-end" style="width: 516px;">
							<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
							<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div class="p20 bgWhite radius8 mt25">
				<div class="pt10 mb30">
					<div>
						<span class="fb fs16">{{name ? name : '待办任务'}}</span>
					</div>
				</div>
				<el-table ref="dataTableRef" v-loading="loading" :data="roleList" highlight-current-row border>
					<el-table-column label="分组" prop="groupName" min-width="100" />
					<el-table-column label="流程" prop="processName" min-width="200" />
					<el-table-column label="流程编码" prop="processInstanceBizCode" min-width="200">
						<template #default="scope">
							<el-text>
								<el-icon @click="copy(scope.row.paramMap.processInstanceCode)">
									<DocumentCopy />
								</el-icon>
								{{ scope.row.paramMap.processInstanceCode }}
							</el-text>
						</template>
					</el-table-column>
					<el-table-column label="业务编码" prop="processInstanceBizCode" :width="processInstanceBizCodeWidth">
						<template #default="scope">
							<el-text>
								<el-icon @click="copy(scope.row.processInstanceBizCode)">
									<DocumentCopy />
								</el-icon>
								{{ scope.row.processInstanceBizCode }}
							</el-text>
						</template>
					</el-table-column>
					<el-table-column label="发起人" prop="rootUserName" width="150" />
					<el-table-column label="发起时间" prop="startTime" width="180" />
					<el-table-column label="当前节点" prop="taskName" width="150" />
					<el-table-column label="任务时间" prop="taskCreateTime" width="180" />
					<el-table-column fixed="right" width="100" label="操作">
						<template #default="scope">
							<el-button type="primary" size="small" link @click="deal(scope.row)">
								<el-icon>
									<Position />
								</el-icon>
								开始处理
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
					v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
			</div>
		</div>
		<task-handle ref="taskHandler" @taskSubmitEvent="handleQuery"></task-handle>
	</div>
</template>

<script setup lang="ts">
	// TODO: 工作流-待办列表
	import { ref, reactive, onMounted } from 'vue'
	import { Picture, DocumentCopy, Position, Search } from "@element-plus/icons-vue";
	import { LocationQuery, LocationQueryValue, useRoute, useRouter } from "vue-router";

	import { queryMineStartGroupFlowList } from "@/views/flyflow/api/group";
	import { getTask, queryMineTask } from "@/views/flyflow/api/task";
	import { copyToBoard, isNotBlank } from "@/views/flyflow/utils/objutil";
	import pagination from "@/views/flyflow/components/pagination.vue";
	import TaskHandle from "@/views/flyflow/components/task/handler/task.vue"
	import useUserStore from '@/store/modules/user'
	const userStore = useUserStore()
	import { defineProps } from 'vue'
	const props = defineProps({
		name: {
			type: String,
			default: '',
		},
	})
	console.log(props.name, 'name====')

	const roleList = ref();
	const taskHandler = ref();
	const loading = ref(false);
	const total = ref(0);
	const mainProcess = ref([]);

	const copy = (value) => {
		copyToBoard(value);
	};
	const queryParams = reactive({
		pageNum: 1,
		pageSize: 10,
	});
	if (props.name != '') {
		queryParams.processName = props.name
	}
	function mainQuery() {
		queryMineStartGroupFlowList(false).then(res => {
			const { data } = res;
			for (var it of data) {
				for (var i of it.items) {
					mainProcess.value.push({
						label: i.name,
						value: i.name,
					});
				}
			}
		})
	}

	// 点击开始处理
	const deal = (row) => {
		getTask(row.taskId).then(res => {
			var d = {
				taskId: row.taskId,
				processInstanceId: row.processInstanceId,
				flowId: row.flowId
			}
			taskHandler.value.deal(d)
		})
	}

	//流程编码的表格宽度
	const processInstanceBizCodeWidth = ref(200);

	// 查询
	function handleQuery() {
		loading.value = true;
		queryMineTask(queryParams)
			.then(({ data }) => {
				for (var itm of data.records) {
					let number = itm.processInstanceBizCode?.length * 12;
					if (number > processInstanceBizCodeWidth.value) {
						processInstanceBizCodeWidth.value = number;
					}
				}
				roleList.value = data.records;
				total.value = data.total;
			})
			.finally(() => {
				loading.value = false;
			});
		userStore.getMessage()	
	}

	const route = useRoute();

	onMounted(() => {
		mainQuery();
		handleQuery();
		const query : LocationQuery = route.query;
		if (isNotBlank(query.taskId)) {
			//跳转过来的
			deal({ taskId: query.taskId })
		}
	});
</script>